<template>
  <div>
    <h2>事件绑定语法</h2>
    <p>{{ age }}</p>
    <!-- 语法 -->
    <!-- <button v-on:click="处理语句或方法">+1</button> -->
    <!-- <button @click="处理语句或方法">+1</button> -->

    <!-- 事件处理程序，如果写一个语句，语句只能使用vue提供的变量、计算属性、方法.... -->
    <button v-on:click="age += 1">+1</button>
    <button @click="age += 1">+1</button>

    <!-- 点击下面的按钮，会调用方法；方法必须放到和data平级的methods中 -->
    <button @click="changeAge">+2</button>
  </div>
</template>

<script>
export default {
  // data 放数据
  data () {
    return {
      age: 20
    }
  },
  // methods 放方法
  methods: {
    changeAge () {
      // 用this来调用数据项、方法、计算属性等等.....
      this.age += 2
    }
  }
}
</script>
